<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Textured Cube Rotation</title>
    <script src="./three.js"></script>
    <script type="module">
        // import * as THREE from './three.js';

        // 初始化 Three.js
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 加载纹理图片
        const textureLoader = new THREE.TextureLoader();
        const textures = [
            'https://images.pexels.com/photos/20861053/pexels-photo-20861053.jpeg',
            'https://images.pexels.com/photos/24304598/pexels-photo-24304598.jpeg',
            'https://images.pexels.com/photos/8408546/pexels-photo-8408546.jpeg',
            'https://images.pexels.com/photos/12597500/pexels-photo-12597500.jpeg',
            'https://images.pexels.com/photos/19121364/pexels-photo-19121364.jpeg',
            'https://images.pexels.com/photos/23879112/pexels-photo-23879112.jpeg'
        ];

        const materials = textures.map(texture => {
            return new THREE.MeshBasicMaterial({ map: textureLoader.load(texture) });
        });

        // 创建立方体几何体
        const geometry = new THREE.BoxGeometry();
        const cube = new THREE.Mesh(geometry, materials);
        scene.add(cube);

        camera.position.z = 5;

        // 设置立方体的初始角度
        cube.rotation.x = Math.PI / 4; // 将立方体向上倾斜 45 度
        // cube.rotation.y = Math.PI / 4; // 将立方体向右旋转 45 度

        function animate() {
            requestAnimationFrame(animate);
            // 旋转速度
            cube.rotation.x += 0.01;
            // cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        }

        animate();
    </script>
</head>
<body>
    <h1>本方式引入库文件，注意导包重命名 js文件里面改了，挂在到window界面上了</h1>
</body>
</html>


 -->





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Textured Cube Rotation</title>
    <script src = "three.js"></script>
    <script type="module">
        import * as THREE from 'https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js';


        // 初始化 Three.js
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 加载纹理图片
        const textureLoader = new THREE.TextureLoader();
        const textures = [
            'https://images.pexels.com/photos/20861053/pexels-photo-20861053.jpeg',
            'https://images.pexels.com/photos/24304598/pexels-photo-24304598.jpeg',
            'https://images.pexels.com/photos/8408546/pexels-photo-8408546.jpeg',
            'https://images.pexels.com/photos/12597500/pexels-photo-12597500.jpeg',
            'https://images.pexels.com/photos/19121364/pexels-photo-19121364.jpeg',
            'https://images.pexels.com/photos/23879112/pexels-photo-23879112.jpeg'
        ];

        const materials = textures.map(texture => {
            return new THREE.MeshBasicMaterial({ map: textureLoader.load(texture) });
        });

        // 创建立方体几何体
        const geometry = new THREE.BoxGeometry();
        const cube = new THREE.Mesh(geometry, materials);
        scene.add(cube);

        camera.position.z = 5;

        // 设置立方体的初始角度
        cube.rotation.x = Math.PI / 4; // 将立方体向上倾斜 45 度
        // cube.rotation.y = Math.PI / 4; // 将立方体向右旋转 45 度

        function animate() {
            requestAnimationFrame(animate);
            // 旋转速度
            cube.rotation.x += 0.01;
            // cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        }

        animate();
    </script>
</head>
<body>
<h1>网络方式引入库文件</h1>
</body>
</html>